<template>
	<view class="content">
		<!-- 		<u-navbar title="" :placeholder='true' height="88rpx" leftIconColor="#fff" titleStyle='color:#fff;font-size:32rpx'
			left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar> -->
		<u-navbar title="会员权益" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="discount_content">
			<template v-for="item in couponList">
				<view class="discount_item">
					<discount-coupon @getCou='userGetCoupon' :item="item" get_status='1'></discount-coupon>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getCouponList,
		getCoupon
	} from '../../../api/mine.js'
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				couponList: []
			}
		},
		created() {
			this.getCouponListData()
		},
		methods: {
			async getCouponListData() {
				const res = await getCouponList()
				console.log(res);
				this.couponList = res.rows
			},
			async userGetCoupon(couponId) {
				console.log(couponId);
				const res = await getCoupon({
					couponId: couponId.id,
					userId: this.$store.state.userInfo.id,
				})
				console.log(res);

				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: '领取成功'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.discount_content {
			background-color: #fff;
			padding: 10rpx 28rpx 30rpx;

			.discount_item {
				margin-top: 20rpx;
			}
		}

	}
</style>